<template>
    <div class="index-card">
        <div class="index-card-list">
            <span class="index-card-name">{{ cardInfo.swapStationName }}</span>
            <span v-if="cardInfo.orderStatus == 1" class="index-card-state" style="color: #41C8F3">计量中</span>
            <span v-if="cardInfo.orderStatus == 2" class="index-card-state" style="color: #FF5858">未支付</span>
            <span v-if="cardInfo.orderStatus == 4" class="index-card-state">已支付</span>
            <span v-if="cardInfo.orderStatus == 64" class="index-card-state" style="color: #A4B7D8">已关闭</span>
        </div>
        <div class="index-card-list">
            <span>订单编号</span>
            <span>{{ cardInfo.orderNo }}</span>
        </div>
        <div class="index-card-list">
            <span>开始时间</span>
            <span>{{ cardInfo.createTime }}</span>
        </div>
        <div class="index-card-list">
            <span>结束时间</span>
            <span>{{ cardInfo.updateTime }}</span>
        </div>
        <div class="index-card-list">
            <span>车架号</span>
            <span>{{ cardInfo.vin }}</span>
        </div>
        <div class="index-card-list">
            <span>车牌号</span>
            <span>{{ cardInfo.plateNo }}</span>
        </div>
        <div class="index-card-list">
            <span>行驶里程(KM)</span>
            <span>{{ cardInfo.kilometers }}</span>
        </div>
        <div class="index-card-list">
            <span>使用电量(kWh)</span>
            <span>{{ cardInfo.totalElect }}</span>
        </div>
        <div class="index-card-list">
            <span>消费金额(元)</span>
            <span>{{ cardInfo.payAmount }}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        cardInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {

        }
    },
    mounted () {
        this.init()
    },
    methods: {
        /* 初始化 */
        init () {

        }
    }
}
</script>

<style lang="less" scoped>

</style>
